<template>
  <g-form-wrap :title="title" :on-save-btn-click="onSaveBtnClick">
    <el-form
      ref="ruleForm"
      :model="formData"
      :rules="formRules"
      label-position="left"
      label-width="140px"
      inline
    >
      <div class="w-full">
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="任务名称" prop="jobName">
              <el-input
                v-model="formData.jobName"
                placeholder="请输入任务名称"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务组名" prop="jobGroup">
              <g-select
                v-model="formData.jobGroup"
                placeholder="请选择任务组名"
                class="edit-item"
                :options="[
                  { id: 'DEFAULT', name: 'DEFAULT' },
                  { id: 'GP调研', name: 'GP调研' }
                ]"
                :filterable="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="调用目标字符串" prop="invokeTarget">
              <el-input
                v-model="formData.invokeTarget"
                placeholder="请输入调用目标字符串"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="cron执行表达式" prop="cronExpression">
              <el-input
                v-model="formData.cronExpression"
                placeholder="请输入cron执行表达式"
                class="edit-item"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="状态" prop="runing">
              <g-select
                v-model="formData.runing"
                placeholder="请选择状态"
                class="edit-item"
                :options="[
                  { id: '0', name: '运行中' },
                  { id: '1', name: '已停用' }
                ]"
                :filterable="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </g-form-wrap>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import { useRoute, useRouter } from 'vue-router'
import { getJobByIdApi, addJobApi, updateJobApi } from '@/api/monitor'
import { cloneDeep } from 'lodash-es'

const route = useRoute()
const router = useRouter()
const isEditing = ref(false)
const ruleForm = ref<FormInstance>()
interface formInterface {
	jobName: string
	jobGroup: string
	invokeTarget: string
	cronExpression: string
	runing: string
}
let formData = ref(<formInterface>
	{
	    jobName: '',
	    jobGroup: '',
	    invokeTarget: '',
	    cronExpression: '',
	    runing: '0'
	}
)
const formRules = reactive<FormRules>({
    jobName: [{ required: true, message: '请输入任务名称', trigger: 'change' }],
    jobGroup: [{ required: true, message: '请选择任务组名', trigger: 'change' }],
    invokeTarget: [{ required: true, message: '请输入调用目标字符串', trigger: 'change' }],
    cronExpression: [{ required: true, message: '请输入cron执行表达式', trigger: 'change' }],
    runing: [{ required: true, message: '请选择状态', trigger: 'change' }]
})
const jobId = route.query.jobId as string | number
const title = route.meta.title as string
isEditing.value = jobId > 0 ? true : false
// 编辑时
if (isEditing.value) {
    const getJobByIdFunc = async () => {
        const ret = await getJobByIdApi(Number(jobId))
        formData.value =  cloneDeep(ret.data) as formInterface
    }
    getJobByIdFunc()
}
// 保存提交
const onSaveBtnClick = (loading: Loading) => {
    ruleForm.value?.validate(async (valid: boolean): Promise<void> => {
        if (valid) {
            loading(true)
            if (isEditing.value) {
                // console.log('formData---update', formData);
                updateJobApi(formData.value).then((res) => {
                    // console.log('res---update', res);
                    if (res * 1 === 200) ElMessage.success('编辑成功')
                })
            } else {
                // console.log('formData---add', formData);
                addJobApi(formData.value).then((res) => {
                    // console.log('res---add', res);
                    if (res * 1 === 201) ElMessage.success('添加成功')
                })
            }
            setTimeout(() => {
                loading(false)
                router.push({ path: '/monitor/job' })
            }, 100)
        } else {
            return
        }
    })
}
</script>
